<!-- detail component-->
<template>
  <div class="detail-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="企业信息" name="first">
          <el-form
            ref="dataForm"
            :rules="rules"
            :model="form"
            label-position="left"
            label-width="80px"
            style="width: 400px;margin: 0 auto;"
          >
            <el-form-item label="公司名称:" prop="name">
              <el-input v-model="form.name" disabled />
            </el-form-item>
            <el-form-item label="公司地区:" prop="address">
              <el-input v-model="form.area" disabled />
            </el-form-item>
            <el-form-item label="公司地址:" prop="address">
              <el-input v-model="form.address" disabled />
            </el-form-item>
            <el-form-item label="审核状态:" prop="state">
              <el-input v-model="form.state" disabled />
            </el-form-item>
            <el-form-item label="营业执照:"> </el-form-item>

            <el-form-item label="法人代表:" prop="legalRepresentative">
              <el-input v-model="form.legalRepresentative" disabled />
            </el-form-item>
            <el-form-item label="公司电话:" prop="phone">
              <el-input v-model="form.phone" disabled />
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
              <el-input v-model="form.email" disabled />
            </el-form-item>
            <el-form-item label="公司规模:" prop="size">
              <el-input v-model="form.size" disabled />
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input
                type="textarea"
                :maxlength="500"
                show-word-limit
                resize="none"
                v-model="form.remarks"
              />
            </el-form-item>
            <el-form-item v-if="$hasPerm('sys:company:update')">
              <el-button type="primary" @click="changeState(2)">同意</el-button>
              <el-button @click="changeState(3)">拒绝</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second"> </el-tab-pane>
        <el-tab-pane label="角色管理" name="third"> </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { fetchCompany, querySome, updateCompany } from "@/api/company";
export default {
  data() {
    return {
      id: null,
      form: {},
      rules: {},
      activeName: "first"
    };
  },

  created() {
    this.id = this.$route.params.id;
    // console.log(this.$route.params.id);
    this.queryCompany();
  },

  methods: {
    queryCompany() {
      fetchCompany(this.id).then(resp => {
        // console.log(resp, 'company');
        this.form = resp.coCompany;
        
         if (this.form.state === 1) {
           this.form.state = '审核中'
         } else if (this.form.state === 2) {
           this.form.state = '同意'
         } else {
           this.form.state = '拒绝'
         }
         this.form.size = this.form.size + '人'
      });
    },
    changeState(state) {
      updateCompany({id: this.id, state, remarks: this.form.remarks}).then(resp => {
        this.queryCompany()
      })
    }
  }
};
</script>

<style lang="scss" scoped></style>
